<style scoped>
    @import "../../../../assets/css/cofferlist.css";
    @import "../../../../assets/css/exprotkeystore.css";
    @import "../../../../assets/css/coffer.css";

    .mui-content .height-100 {
        overflow: hidden;
        background-color: #fff;
    }
</style>
<template>
    <transition :name="tName">
        <div class="mui-content height-100">
            <div id="tabbar" class="mui-control-content mui-active height-100">
                <div class="cofferlist-content" style="border-bottom: 0.01rem solid #ddd">
                    <header class="mui-bar list-bg immerse-margin">
                        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #000;" @click="changeRoute('/index/wallet')"></a>
                        <div class="mui-title" style="font-size: 0.3rem;font-weight: normal;">ETH</div>
                        <!--TODO-->
                        <!--<img src="@/assets/img/coffer/list.png" class="mui-pull-right cofferlist-icon" alt="">-->
                    </header>
                    <!--<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted coffer-fff coffer-top">-->
                        <!--<a class="mui-control-item export-active">{{ $t('m.wallet.transaction.list.prompt[0]') }}</a>-->
                    <!--</div>-->
                </div>
                <div class="mui-slider list-bg cofferlist-ht cofferlist-top">
                    <div class="mui-slider-group">
                        <div class="mui-slider-item mui-control-content mui-active">
                            <div class="export-item export-bgcolor export-line" style="border-bottom: 0;">
                                <div v-infinite-scroll="loadMore"
                                     infinite-scroll-disabled="loading.show"
                                     infinite-scroll-distance="0"
                                     class="mui-table-view" v-show="list.length > 0">
                                    <li class="mui-table-view-cell" v-for="(v,k) in list" :key="k" @click="myChangeRoute('/wallet/transaction/eth/detail', v)">
                                        <a class="">
                                            <img src="@/assets/img/coffer/get.jpg" class="mui-pull-left list-icon" alt="" v-if="v.value==0 && v.isError==0">
                                            <img src="@/assets/img/coffer/up.jpg" class="mui-pull-left list-icon" alt="" v-else-if="(request.address.toLowerCase())==v.from && v.isError==0">
                                            <img src="@/assets/img/coffer/prohibit.jpg" class="mui-pull-left list-icon" alt="" v-else-if="v.isError==1">
                                            <img src="@/assets/img/coffer/dwon.jpg" class="mui-pull-left list-icon" alt="" v-else-if="(request.address.toLowerCase())==v.to && v.isError==0">
                                            <template v-if="v.value==0">
                                                <div class="mui-media-body">
                                                    {{ addressSub(v.to) }}
                                                    <p class='mui-ellipsis'>{{ v.timeStamp | time2Date() }}</p>
                                                </div>
                                                <span class="mui-badge mui-badge-inverted list-fs">0</span>
                                            </template>
                                            <template v-else-if="(request.address.toLowerCase())==v.from">
                                                <div class="mui-media-body">
                                                    {{ addressSub(v.to) }}
                                                    <p class='mui-ellipsis'>{{ v.timeStamp | time2Date() }}</p>
                                                </div>
                                                <span class="mui-badge mui-badge-inverted list-fs">-{{ v.value | roundOff(4) }}</span>
                                            </template>
                                            <template v-else>
                                                <div class="mui-media-body">
                                                    {{ addressSub(v.from) }}
                                                    <p class='mui-ellipsis'>{{ v.timeStamp | time2Date() }}</p>
                                                </div>
                                                <span class="mui-badge mui-badge-inverted list-fs">+{{ v.value | roundOff(4) }}</span>
                                            </template>

                                        </a>
                                    </li>
                                </div>
                                <div style="width: 100%;text-align: center;background: white;padding-top: 15px;" v-show="list.length == 0 && !loading.show">
                                    {{ $t('m.wallet.transaction.list.prompt[4]') }}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="list-btn">
                    <a @click="myChangeRoute('/wallet/qrcode')">{{ $t('m.wallet.transaction.list.prompt[5]') }}</a>
                    <a @click="myChangeRoute('/wallet/transaction/eth/transfer')">{{ $t('m.wallet.transaction.list.prompt[6]') }}</a>
                </div>
            </div>
            <Loading></Loading>
        </div>

    </transition>
</template>
<script>
    /* eslint-disable */
    import axios from 'axios';
    import Config from "@/assets/js/config/load";

    import {myAlert} from "@/assets/js/h5plus/nativeUI";

    export default {
        name: 'wallet_transaction_eth_list',
        create() {

        },
        mounted() {
            this.request.address = this.walletActive.address;
            this.getList();
            // this.aTransitionName({transactionList: "slide-right"});
            this.$store.dispatch("aBackUrl", "/index/wallet");
        },
        watch: {},
        data() {
            return {
                list: [],
                request: {
                    pageNo: 1,
                    pageSize: 50,
                    type: "",
                    error: 0,
                    blockStart: 0,
                    blockEnd: 9999999,
                    isEnd: false,
                    cannot: false
                },
                tName: "slide-right"
            }
        },
        methods: {
            getList: function () {
                if (this.request.cannot) return;
                this.request.cannot = true;
                setTimeout(() => {
                    this.request.cannot = false;
                }, 1000);

                if (this.request.isEnd) return;
                this.aLoading({
                    show: true,
                    tip: this.$t('m.wallet.transaction.list.prompt[7]')
                });
                let config = Config();
                axios.get(config.etherscan.url, {
                    params: {
                        apikey: config.etherscan.key,
                        module: "account",
                        action: "txlist",
                        address: this.request.address,
                        startblock: 0,
                        endblock: 99999999,
                        sort: "desc",
                        page: this.request.pageNo,
                        offset: this.request.pageSize,
                        isError: 1
                    }
                }).then((response) => {
                    if (response.data.status != 1 && response.data.status != 0) {
                        throw new Error("get list error");
                    }
                    for (let i in response.data.result) {
                        response.data.result[i].value = response.data.result[i].value / 10 ** 18;
                    }
                    this.list = this.list.concat(response.data.result);
                    if (response.data.result.length < this.request.pageSize) this.request.isEnd = true;
                    this.aLoading({
                        show: false,
                        tip: this.$t('m.wallet.transaction.list.prompt[7]')
                    });
                }).catch((error) => {
                    this.aLoading({
                        show: false,
                    });
                    myAlert({
                        msg: this.$t('m.wallet.transaction.list.prompt[8]'),
                        button: this.$t('m.wallet.transaction.list.prompt[9]')
                    });

                    console.log(error);
                });
            },
            loadMore: function () {

                this.request.pageNo++;
                this.getList();
            },
            changeTab: function (type, error = 0) {
                this.request.type = type;
                this.request.error = error;
                this.request.pageNo = 0;
                this.request.isEnd = false;
                this.list = [];
                this.getList();
            },
            myChangeRoute: function (path, v = {}) {
                // this.$store.dispatch('aTransitionName', {transactionList: "none"})
                this.tName = "none";
                setTimeout(() => {
                    this.changeRoute(path, v)
                }, 50);
            }
        },

    }
</script>
